import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_dva_hooks/flutter_dva_hooks.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/components/Button/CustomElevateButton.dart';
import 'package:todo_app/components/Overlay/main.dart';
import 'package:todo_app/components/TextInput/CustomTextInput.dart';
import 'package:todo_app/constants/DColor.dart';
import 'package:todo_app/constants/ImageAssets.dart';
import 'package:todo_app/constants/Screen.dart';
import 'package:todo_app/controllers/definitions/UserModel.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/utils/AppNavigator.dart';
import 'package:todo_app/utils/FormValidator.dart';
import 'package:todo_app/models/actions.dart';

class UserLoginPage extends HookWidget {
  const UserLoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    var usernameController = useTextEditingController(text: "");
    var passwordController = useTextEditingController(text: "");
    var connect = useDvaConnect();

    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Image.asset(
              ImageAssets.loginBgJpg,
              fit: BoxFit.cover,
              height: Screen.height,
            )
          ),
          Container(
            color: Colors.black54,
          ),
          SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: 160.dp),
                ClipRRect(
                  borderRadius: BorderRadius.circular(51.dp),
                  child: Image.asset(ImageAssets.commonLogoPng, width: 102.dp, height: 102.dp, fit: BoxFit.cover)
                ),
                Gaps.vGap70,
                CustomTextInput(
                  width: 345.dp, 
                  height: 44.dp,
                  padding: EdgeInsets.symmetric(horizontal: 16.dp),
                  placeholder: "请输入用户名",
                  controller: usernameController,
                  keyboardType: TextInputType.name,
                  textInputAction: TextInputAction.next,
                  maxLines: 1,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(18.dp)
                  ),
                ),
                Gaps.vGap16,
                CustomTextInput(
                  width: 345.dp, 
                  height: 44.dp,
                  padding: EdgeInsets.symmetric(horizontal: 16.dp),
                  placeholder: "请输入密码",
                  controller: passwordController,
                  keyboardType: TextInputType.name,
                  obscureText: true,
                  maxLines: 1,
                  textInputAction: TextInputAction.done,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(18.dp)
                  ),
                ),
                Gaps.vGap32,
                CustomElevateButton(
                  onTap: () async {
                    var formData = {
                      'username': usernameController.text,
                      'password': base64Encode(utf8.encode(passwordController.text))
                    };
                    var formValidator = Validator(rules: [
                      ValidateRule(required: true, field: 'username', msg: "请输入用户名"),
                      ValidateRule(required: true, field: 'password', msg: "请输入密码"),
                    ]);

                    var valiResult = await formValidator.validate(formData);
                    if(valiResult.validate) {
                      connect.props?.login(UserModel()..fromJson(formData));
                    } else {
                      showOverlayToast(valiResult.msg!);
                    }
                  },
                  width: Screen.width - 30.dp, 
                  height: 44.dp,
                  child: const Text("登录")
                ),
                Gaps.vGap16,
                Center(
                  child: GestureDetector(
                    onTap: () {
                      AppNavigator.push("/user/register");
                    },
                    child: Text("没有账号，马上注册一个", style: TextStyle(color: DColor.link, fontSize: 12.dp),)
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}